<template>
  <view class="content">
    <!-- #ifdef MP-WEIXIN -->
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <!-- #endif -->
    <view class="banner-box">
      <swiper :autoplay="true" :interval="2000" circular>
        <swiper-item v-for="(item, index) in adList" :key="index">
          <view class="swiper-item">
            <image :src="item.image" mode="widthFix"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="account">
      <view class="info" @click="go('user-center')">
        <image
          :src="
            member.avatar ? member.avatar : '/static/images/mine/default.png'
          "
          mode="widthFix"
        ></image>
        <view class="name">
          {{ member.nickname }}
        </view>
        <view class="sum" @click="goOrders">
          <text>{{ member.integral }}</text>
          {{ currentLanguageTexts.points }}
          <uv-icon
            name="arrow-right"
            size="12"
            color="#ccc"
            style="margin-right: 2px"
          ></uv-icon>
        </view>
      </view>
    </view>
    <view class="list-wrap">
      <view class="tab-wrap">
        <uv-tabs
          :list="catList"
          @click="clickCate"
          activeStyle="color:#FF162E;font-weight:bold"
          lineColor="color:#FF162E"
        ></uv-tabs>
      </view>
      <scroll-view
        scroll-y
        class="sv"
        :style="{ height: scrollHeight + 'px' }"
        :scroll-top="scrollTop"
        lower-threshold="20"
        @scroll="scroll"
        @scrolltolower="reachBottom"
      >
        <view class="product-box">
          <view class="commodity" v-if="goodList.length > 0">
            <view
              class="product"
              @click="goDetail(item.id)"
              v-for="(item, index) in goodList"
              :key="index"
            >
              <view class="product-img">
                <image :src="item.image" mode="widthFix"></image>
              </view>
              <view class="product-info">
                <view class="product-name line2">{{ item.title }}</view>
                <view class="label">
                  <label class="label1">
                    <uni-icons
                      type="hand-up-filled"
                      size="13"
                      color="#fff"
                      style="margin-right: 5rpx"
                    ></uni-icons>
                    {{ currentLanguageTexts.valueExchange }}
                  </label>
                  <label class="label2">{{ currentLanguageTexts.goods }}</label>
                </view>
                <view class="product-price">
                  <label
                    >{{ item.score }}{{ currentLanguageTexts.point }} </label
                  >+{{ item.price }}{{ currentLanguageTexts.yuan }}
                </view>
                <view class="product-purchase">
                  <uni-icons
                    type="fire-filled"
                    size="13"
                    color="#FF162E"
                    style="margin-right: 5rpx"
                  ></uni-icons>
                  {{ item.sales
                  }}{{ currentLanguageTexts.thePersonHasBeenExchanged }}
                </view>
              </view>
            </view>
            <uv-load-more :status="listStatus" />
          </view>
          <uv-empty
            :text="currentLanguageTexts.noData"
            v-else
            margin-top="100"
            mode="list"
          ></uv-empty>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue';
import { onReachBottom, onShow, onLoad, onReady } from '@dcloudio/uni-app';
import { scoreAds, scoreCates, scoreShopIndex } from '@/api/score';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
const main = useMainStore();
const { member, isLogin, currentLanguageTexts } = storeToRefs(main);

const catList = ref([{ id: 0, name: currentLanguageTexts.value.all }]);
const tabIndex = ref(0);
const dataStatus = ref('loading');
const noticeOrders = ref(['1111', '2222']);
const scrollHeight = ref(0);
const pH = ref(0);
const scrollTop = ref(-1);
const adList = ref([]);
const goodList = ref([]);
const page = ref(1);
const pageSize = ref(10);
const lastPage = ref(false);
const listStatus = ref('loadmore');
const cateId = ref(0);

onReady(() => {
  uni.getSystemInfo({
    success(res) {
      pH.value = res.windowHeight;
      let scrollH = uni.createSelectorQuery().select('.sv');
      scrollH
        .boundingClientRect((data) => {
          let pH0 = pH.value;
          scrollHeight.value = pH0 - data.top - 5;
        })
        .exec();
    },
  });
});

const reachBottom = () => {
  if (lastPage.value || listStatus.value == 'loading') return;
  if (!lastPage.value) {
    listStatus.value = 'loading';
    setTimeout(() => {
      listStatus.value = 'loadmore';
      getList(true, ++page.value);
    }, 500);
  }
};

const clickCate = (item) => {
  cateId.value = item.id;
  page.value = 1;
  lastPage.value = false;
  getList();
};

onLoad(() => {
  if (!isLogin.value) {
    uni.navigateTo({ url: '/pages/components/pages/login/login' });
  }
  getAds();
  getCate();
  getList();
});

const goDetail = (item) => {
  uni.navigateTo({
    url: '/pages/components/pages/scoreproduct/detail?id=' + item,
  });
};

const goOrders = () => {
  uni.navigateTo({
    url: '/pages/components/pages/scoreproduct/order',
  });
};

const getAds = async () => {
  adList.value = await scoreAds();
};

const getCate = async () => {
  let data = await scoreCates();
  catList.value = catList.value.concat(data);
};

const getList = async (isNextPage) => {
  let data = await scoreShopIndex({
    page: page.value,
    limit: pageSize.value,
    cateId: cateId.value,
  });

  if (data) {
    // 不够一页
    if (data.length < 10) {
      listStatus.value = 'nomore';
    }
    // 最后一页
    if (data.length == 0) {
      lastPage.value = true;
    }
    // 第二页开始
    if (isNextPage) {
      goodList.value = goodList.value.concat(data);
      return;
    }
    goodList.value = data;
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.banner-box {
  width: 100%;
  height: 260rpx;
  swiper {
    width: 100%;
    height: 100%;
  }
  image {
    width: 100vw;
    height: 100%;
  }
}
.account {
  width: 95vw;
  margin: 0 auto;
  border-radius: 20rpx;
  padding: 20rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  top: -30rpx;
  box-sizing: border-box;
  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    //padding-bottom: 30rpx;
    border-bottom: 1rpx solid #ededed;
    image {
      width: 88rpx;
      height: 88rpx;
      border-radius: 88rpx;
    }
    .name {
      flex: 1;
      margin: 0 20rpx;
    }
    .sum {
      display: flex;
      align-items: center;
      font-weight: bold;

      text {
        color: $theme-color;
        font-size: 38rpx;
        margin-right: 10rpx;
      }
    }
    .img {
      width: 60rpx;
      height: 60rpx;
      background-color: rgba(207, 25, 42, 0.3);
      border-radius: 60rpx;
    }
  }
}

.list-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.tab-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  padding-bottom: 10rpx;
}

.product-box {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  .commodity {
    width: 100%;
    margin: 0 auto;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.product {
  width: 49.2%;
  margin-bottom: 15rpx;
  background: #fff;
  border-radius: 5rpx;
  overflow: hidden;
  .product-img {
    width: 100%;
    height: 46.6vw;
    border-radius: 5rpx;
    overflow: hidden;
    image {
      width: 100%;
      height: auto;
    }
  }
  .product-info {
    padding: 20rpx;
    .product-name {
      font-size: 28rpx;
    }
    .label {
      margin: 20rpx 0;
      label {
        padding: 2rpx 10rpx;
        font-size: $font-size-sm;
        display: inline-block;
        border-radius: 5rpx;
      }
      .label1 {
        color: $uni-text-color-inverse;
        background-color: $theme-color;
        margin-right: 15rpx;
      }
      .label2 {
        color: $text-color-grey;
        border: 1rpx solid $text-color-grey;
      }
    }
    .product-price {
      color: $theme-color;
      font-size: $font-size-sm;
      label {
        font-weight: bold;
        font-size: $font-size-lg;
      }
    }
    .product-purchase {
      margin-top: 20rpx;
      color: $text-color-grey;
      font-size: $font-size-sm;
    }
  }
}
</style>
